<template>
    <el-card class="item">
        <template #header>
            <div class="card-header">
                <span>光照</span>
            </div>
        </template>
        <div id="beam" ref="Beam" style="width: 100%;height: 250px;"></div>
    </el-card>   
</template>
   

<script setup>   
import { onMounted, watch, ref, onUnmounted, nextTick } from 'vue';   
import * as echarts from 'echarts';
   
const Beam = ref(null);   
let myChart = null;
   
const initChart = () => {
    if (!myChart) {
        myChart = echarts.init(Beam.value);
        window.addEventListener('resize', handleResize); // 添加响应式
    }
    updateChart();   
};
   
const updateChart = () => {
    if (!myChart) return;
    
      const option = {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
                color: '#666' // X轴文字颜色
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#666' // Y轴文字颜色
            }
        },
        series: [{
            type: 'bar', // 修改为柱状图类型
            data: props.beam,
            itemStyle: {
                color: '#409EFF', // 柱条颜色
                borderRadius: [4, 4, 0, 0] // 顶部圆角
            },
            barWidth: '60%' // 柱条宽度
        }],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow' // 悬浮阴影指示
            }
        }
    };
    myChart.setOption(option, true); // 第二个参数设为true进行强制重绘   
};
   
const handleResize = () => {
    myChart?.resize();   
};
   
const props = defineProps({
    beam: Array   
});
   
// 改为使用watch明确监听   
watch(() => props.beam, (newVal) => {
    if (newVal) {
        nextTick(() => {
            if (!myChart) {
                initChart();
            } else {
                updateChart();
            }
        });
    }   
}, { deep: true });
   
onMounted(() => {
    nextTick(initChart); // 等待DOM渲染完成   
});
   
onUnmounted(() => {
    if (myChart) {
        window.removeEventListener('resize', handleResize);
        myChart.dispose();
    }   
});   
</script>
<!-- <script setup>   
import { onMounted, watchEffect, ref, onUnmounted } from 'vue';   
import * as echarts from 'echarts';
   
const Beam = ref(null);   
let myChart = null; // 保存图表实例
   
// 初始化图表   
const initChart = () => {
    if (!myChart) {
        myChart = echarts.init(Beam.value);
    }
    
    const option = {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
                color: '#666' // X轴文字颜色
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#666' // Y轴文字颜色
            }
        },
        series: [{
            type: 'bar', // 修改为柱状图类型
            data: props.beam,
            itemStyle: {
                color: '#409EFF', // 柱条颜色
                borderRadius: [4, 4, 0, 0] // 顶部圆角
            },
            barWidth: '60%' // 柱条宽度
        }],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow' // 悬浮阴影指示
            }
        }
    };
    myChart.setOption(option);   
}
   
const props = defineProps({
    beam: Array   
})
   
// 监听数据变化   
watchEffect(() => {
    if (myChart && props.beam) {
        // 更新数据时先销毁旧图表
        myChart.dispose();
        myChart = null;
        initChart();
    }   
});
   
// 组件挂载时初始化   
onMounted(() => {
    initChart();   
});
// 组件卸载时销毁实例   
onUnmounted(() => {
    if (myChart) {
        myChart.dispose();
    }   
}); 
</script> -->